<template>
    <view>
        <view class="service" style="margin-top: -5rpx">
            <view class="icon_line_green"></view>
            <view style="margin-left: 30rpx">健康防疫</view>
        </view>

        <view class="card_content" style="width: 84%">
            <view style="display: flex; justify-content: space-between">
                <!-- 当前体温 -->
                <view style="width:48%">
                    <text style="color: red">*</text>
                    <text class="" style="width: 200rpx"> 当前体温（℃） </text>
                </view>
                <uni-easyinput
                    v-if="type != 'detail'"
                    v-model="info.temperature"
                    type="text"
                    :clearable="false"
                    :inputBorder="false"
                    @input="input"
                    placeholder="请输入用药人当前体温"
                />
                <text v-if="type == 'detail'" style="float: right">{{
                    info.temperature
                }}</text>
            </view>
            <!-- 防疫登记 未生成订单页面 mallorder传过来的 -->
            <view v-if="type != 'detail' && preventionFlag == 2">
                <view
                    class="personal_info specification"
                    style="
                        padding: 32rpx 0 20rpx;
                        border-bottom: 1px solid #fbf5f5;
                        border-top: 1px solid #fbf5f5;
                    "
                >
                    <view class="display6">
                        <text class="specification">
                            14天内去过境外、中高风险地区
                        </text>
                        <radio-group class="radio-wrap" @change="radioChange1">
                            <label class="radio"
                                ><radio
                                    value="1"
                                    checked="true"
                                    color="#4ccdbc"
                                    style="transform: scale(0.7)"
                                />是</label
                            >

                            <label class="radio"
                                ><radio
                                    value="2"
                                    color="#4ccdbc"
                                    style="transform: scale(0.7)"
                                />否</label
                            >
                        </radio-group>
                    </view>
                    <view class="display6">
                        <text class="specification">
                            14天内冷链等高危从业人员接触史
                        </text>

                        <radio-group class="radio-wrap" @change="radioChange2">
                            <label class="radio"
                                ><radio
                                    value="1"
                                    checked="true"
                                    color="#4ccdbc"
                                    style="transform: scale(0.7)"
                                />是</label
                            >

                            <label class="radio"
                                ><radio
                                    value="2"
                                    color="#4ccdbc"
                                    style="transform: scale(0.7)"
                                />否</label
                            >
                        </radio-group>
                    </view>
                    <view class="display6">
                        <text class="specification">
                            14天内境外人员接触史
                        </text>
                        <radio-group class="radio-wrap" @change="radioChange3">
                            <label class="radio"
                                ><radio
                                    value="1"
                                    checked="true"
                                    color="#4ccdbc"
                                    style="transform: scale(0.7)"
                                />是</label
                            >

                            <label class="radio"
                                ><radio
                                    value="2"
                                    color="#4ccdbc"
                                    style="transform: scale(0.7)"
                                />否</label
                            >
                        </radio-group>
                    </view>
                </view>
                <view style="margin: 20rpx 0">
                    <view style="display: flex">
                        <view
                            style="
                                color: #ff5100;
                                font-size: 40rpx;
                                margin-top: 8rpx;
                            "
                            >*</view
                        >
                        <view class="titles">
                            <span style="margin-top: 8rpx">症状</span>

                            <!-- <view class="wapper"> -->
                            <view
                                class="tag-view"
                                v-for="(data, index) in zhengzhuangList"
                                :key="index"
                            >
                                <span
                                    class="tag"
                                    :class="
                                        isActive == index
                                            ? 'tagCheck'
                                            : 'tagNoCheck'
                                    "
                                    @click="setInverted(data.dictValue, index)"
                                >
                                    {{ data.dictLabel }}
                                </span>
                            </view>
                            <!-- </view> -->
                        </view>
                    </view>
                    <!-- v-if="isActive==0||drugData.drugExplain!==''&&drugData.drugExplain!==null&&drugData.drugExplain!=='空腹服用'&&drugData.drugExplain!=='睡前服用'&&drugData.drugExplain!=='餐前服用'&&drugData.drugExplain!=='餐后服用'" -->
                    <uni-easyinput
                        v-if="isActive == zhengzhuangList.length - 1"
                        :clearable="false"
                        maxlength="100"
                        type="textarea"
                        placeholder="例：咽喉肿痛，最多输入100个字"
                        :value="preventionInfo.otherStr"
                        @input="inputOther"
                        class="textinput"
                    ></uni-easyinput>
                </view>
                <view class="checkMsg">
                    <checkbox-group @change="selectAgree">
                        <label>
                            <checkbox
                                value="1"
                                :checked="isChecked"
                                style="
                                    transform: scale(0.7);
                                    border-radius: 50%;
                                "
                                color="#62c0ad"
                            />
                            <text
                                >我承诺以上信息真实有效，否则承担一切法律责任</text
                            >
                        </label>
                    </checkbox-group>
                </view>
            </view>

            <!-- 防疫登记详情--待支付页面 -->
            <view v-if="type == 'detail' && preventionFlag == 2" class="gray_font">
                <view
                    class="personal_info specification"
                    style="
                        padding: 20rpx 0;
                        border-bottom: 1px solid #fbf5f5;
                        border-top: 1px solid #fbf5f5;
                    "
                >
                    <view class="display6">
                        <text class="specification">
                            14天内去过境外、中高风险地区
                        </text>
                        <span>{{ info.foreginFlag == 1 ? '是' : '否' }}</span>
                    </view>
                    <view class="display6">
                        <text class="specification">
                            14天内冷链等高危从业人员接触史
                        </text>
                        <span>{{ info.coolFlag == 1 ? '是' : '否' }}</span>
                    </view>
                    <view class="display6">
                        <text class="specification">
                            14天内境外人员接触史
                        </text>
                        <span>{{ info.foreginTouch == 1 ? '是' : '否' }}</span>
                    </view>
                </view>
                <view style="margin: 20rpx 0">
                    <view style="display: flex">
                        <view class="titles">
                            <span style="margin-top: 8rpx">症状</span>
                            <view class="wapper">
                                <view class="tag-view" :key="index">
                                    <span class="tag tagNoCheck">{{
                                        info.symptom
                                    }}</span>
                                </view>
                            </view>
                        </view>
                    </view>
                    <view>{{ info.otherStr }}</view>
                </view>
            </view>
            <!-- 高于37.3度的提示框 -->
            <uni-popup ref="temperaPop" type="dialog">
                <view class="inputDialog">
                    <view class="title">
                        {{ temperaturePopTips }}
                    </view>
                    <view class="button-bottom">
                        <view class="cancel" @click="closeTem">取消</view>
                        <view @click="closeTem" class="green_words">确定</view>
                    </view>
                </view>
            </uni-popup>
        </view>
    </view>
</template>

<script>
export default {
    name: 'Temperature',
    props: [
        'preventionFlag', //preventionFlag 是否需要填写防疫信息 1 不需要，2需要
        'type', // 支付还是待支付详情
        'info',
    ],
    data() {
        return {
            temperaturePopTips: '', // 体温提示框文案
            preventionInfo: {
                temperature: '', //体温
                foreginFlag: '1', //是否出境
                coolFlag: '1', //是否冷链高危人员
                foreginTouch: '1', //是否接触境外人员
                symptom: '发热', //选中的症状
                otherStr: '', //其他
                choceFlag: false, // 承诺选中
            },
            zhengzhuangList: [
                { dictLabel: '发热', dictValue: '发热' },
                { dictLabel: '咳嗽', dictValue: '咳嗽' },
                { dictLabel: '流涕', dictValue: '流涕' },
                { dictLabel: '其他', dictValue: '其他' },
            ],
            // dictValue: '', //选中的症状
            isActive: '0', // 选中症状的下标
            // optionType:{
            //   '1':'是',
            //   '2':'否'
            // },
            // zhengzhuangType: {
            //     1: '发热',
            //     2: '咳嗽',
            //     3: '流涕',
            //     4: '其他',
            // },
        };
    },

    methods: {
        symptomType(value) {
            console.log(value, '9999');
            if (value == '1') {
                return '发热';
            } else if (value == '2') {
                return '咳嗽';
            } else if (value == '3') {
                return '流涕';
            } else {
                return '其他';
            }
        },
        // 体温>37.3弹框关闭
        closeTem() {
            this.$refs.temperaPop.close();
        },
        input(e) {
            this.preventionInfo.temperature = e;
            this.$emit('send', this.preventionInfo.temperature);
            this.$emit('sendInfo', this.preventionInfo);
        },
        selectAgree(e) {
            if (e.target.value.length > 0) {
                this.preventionInfo.choceFlag = true;
            } else {
                this.preventionInfo.choceFlag = false;
            }
            this.$emit('sendInfo', this.preventionInfo);
        },
        //
        radioChange1(val) {
            console.log(this.preventionInfo, '99999999999999-----------');
            this.preventionInfo.foreginFlag = val.target.value;
            this.$emit('sendInfo', this.preventionInfo);
        },
        radioChange2(val) {
            this.preventionInfo.coolFlag = val.target.value;
            this.$emit('sendInfo', this.preventionInfo);
        },
        radioChange3(val) {
            this.preventionInfo.foreginTouch = val.target.value;
            this.$emit('sendInfo', this.preventionInfo);
        },
        // 症状选择
        setInverted(dictValue, index) {
            this.sign = index;
            this.preventionInfo.symptom = dictValue;
            // console.log(this.preventionInfo.symptom, dictValue,'--------------99999')
            this.isActive = index;
            if (dictValue != '其他') {
                this.preventionInfo.otherStr = '';
            }

            this.$emit('sendInfo', this.preventionInfo);
            // if(index == this.zhengzhuangList.length-1){
            //   this.preventionInfo.otherStr =
            // }
            // this.drugData.isActiveid = index;
            // this.drugData.medicationExplanation = dictValue;
            // this.drugData.drugExplain = dictValue;
        },
        // 其他症状
        inputOther(e) {
            this.preventionInfo.otherStr = e;
            this.$emit('sendInfo', this.preventionInfo);

            // this.drugData.medicationExplanation=e;
        },
    },
};
</script>

<style scoped lang='less'>
.icon_line_green {
    height: 35rpx;
    padding: 4rpx;
    border-top-right-radius: 40rpx;
    border-bottom-right-radius: 40rpx;
    background-color: #4fcbbf;
    position: absolute;
    left: 0;
}
.card_content {
    background-color: #ffffff;
    padding: 30rpx;
    margin: 30rpx;
    border-radius: 10rpx;
}
/deep/.uni-easyinput__content-input.data-v-abe12412 {
    font-size: 30rpx;
    text-align: right;
}

/* 弹出框 */
.inputDialog {
    width: 600rpx;
    border-radius: 10rpx;
    background-color: #ffffff;
}
/deep/.input-padding {
    padding: 20rpx !important;
}
.inputvalue {
    background-color: #f6f6f6;
}
.inputDialog > .title {
    text-align: center;
    padding: 30rpx;
    font-size: 32rpx;
    line-height: 50rpx;
}
.button-bottom {
    display: flex;
    border-top: 1px solid #f0f0f0;
}
.button-bottom view {
    width: 50%;
    padding: 20rpx 0 20rpx 0;
    font-size: 32rpx;
    text-align: center;
}
.cancel {
    border-right: 1px solid #f0f0f0;
}
/* 绿色字体 */
.green_words {
    color: #62c0ad;
}
.specification {
    font-size: 29rpx;
}

.titles {
    display: flex;
    margin-bottom: 10rpx;
}

.tag-view {
    /* #ifndef APP-PLUS-NVUE */
    display: inline-block;
    /* #endif */
    // flex-direction: column;
    margin: 10rpx 15rpx;
    // justify-content: center;
}
.tagCheck {
    background-color: #4fcbbf;
    color: #ffffff !important;
}
.tagNoCheck {
    background: #f0f0f0;
    color: #000;
}
.tag {
    padding: 2rpx 16rpx;
    border-radius: 10rpx;
    font-size: 26rpx;
}
/deep/.uni-tag--circle {
    border-radius: 0;
}
/deep/.uni-tag-text--small {
    font-size: 28rpx;
}
// 勾选协议
.checkMsg {
    display: flex;
    text-align: center;
    font-size: 24rpx;
}
// 协议
.textMsg {
    text-align: center;
    font-size: 24rpx;
}
.display6 {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20rpx;
}
</style>
